<template>
    <div class="help-wrap">
        <div class="main-wrap">
            <!-- nav -->
            <Nav></Nav>
            <!-- type -->
            <ul class="type-wrap">
                <li class="no-select" :class="'key'==type.text ? 'active shadow' : ''" @click="typeChange('key')">
                    <img class="type-img" src="/src/assets/imgs/icon-key.svg" alt="获取秘钥"/>
                    <div class="type-title">通行令牌</div>
                </li>
                <li class="no-select" :class="'login'==type.text ? 'active shadow' : ''" @click="typeChange('login')">
                    <img class="type-img" src="/src/assets/imgs/icon-login.svg" alt="用户登录"/>
                    <div class="type-title">用户登录</div>
                </li>
                <li class="no-select" :class="'engine'==type.text ? 'active shadow' : ''" @click="typeChange('engine')">
                    <img class="type-img" src="/src/assets/imgs/icon-engine.svg" alt="管理引擎"/>
                    <div class="type-title">管理引擎</div>
                </li>
                <li class="no-select" :class="'bookmark'==type.text ? 'active shadow' : ''" @click="typeChange('bookmark')">
                    <img class="type-img" src="/src/assets/imgs/icon-bookmark.svg" alt="管理书签"/>
                    <div class="type-title">管理书签</div>
                </li>
                <li class="no-select" :class="'setting'==type.text ? 'active shadow' : ''" @click="typeChange('setting')">
                    <img class="type-img" src="/src/assets/imgs/icon-setting.svg" alt="设置项"/>
                    <div class="type-title">设置项</div>
                </li>
            </ul>
            <!-- help content -->
            <div class="help-body">
                <!-- key -->
                <div class="help-keys" v-if="type.text == 'key'">
                    <div class="app-card">
                        <div class="app-card-header">通行令牌是什么,为什么需要它?</div>
                        <div class="app-card-body">
                            <p>【通行令牌】就像是门牌号码。每位用户的搜索引擎和书签都通过【通行令牌】进行获取，有了它之后才能管理自己的搜索引擎和书签</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">通行令牌怎么申请?</div>
                        <div class="app-card-body">
                            <p>1.点击进入 <a href="https://yi-ja.com/" target="_blank">易加软件</a> 官网</p>
                            <p>2.登录控制面板</p>
                            <p>3.申请【通行令牌】</p>
                            <p>4.完成后返回网站登录后即可管理自己的搜索引擎和书签</p>
                        </div>
                    </div>
                </div>
                <!-- login -->
                <div class="app-card" v-if="type.text == 'login'">
                    <div class="app-card-header">用户登录</div>
                    <div class="app-card-body">
                        <p>1.点击右上角【登录】按钮</p>
                        <p>2.弹出登录面板,如下图</p>
                        <p><img src="/src/assets/help/login-02.jpg" alt=""></p>
                        <p>3.输入账号密码后点击【登录】按钮即可登录</p>
                        <p>4.没有账号密码请点击【没有账号?】前往注册后再进行登录操作即可登录</p>
                        <p>5.觉得麻烦可以使用登录面板上【微信快速登录】按钮进行扫码快速登录</p>
                    </div>
                </div>
                <!-- engine -->
                <div class="help-engine" v-if="type.text == 'engine'">
                    <div class="app-card">
                        <div class="app-card-header">搜索引擎 (进入)</div>
                        <div class="app-card-body">
                            <p>登录后即可进入并管理搜索引擎,如下图</p>
                            <p><img src="/src/assets/help/engine-01.jpg" alt=""></p>
                            <p>在这里即可以对搜索引擎管理</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">搜索引擎 (新增)</div>
                        <div class="app-card-body">
                            <p>1.进入搜索引擎管理界面后,点击引擎面板内右上角
                                <a-button shape="circle" size="small">+</a-button>
                                按钮弹出新增弹框,如下图
                            </p>
                            <p><img src="/src/assets/help/engine-add.jpg" alt=""></p>
                            <p>2.输入链接和标题,点击【OK】即可新增一个搜索引擎</p>
                            <p>3.在首页搜索栏下方就会多出刚才添加的搜索引擎,搜索内容即可使用您刚才添加的搜索引擎</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">搜索引擎 (编辑)</div>
                        <div class="app-card-body">
                            <p>1.选择需要编辑的搜索引擎,点击【编辑】按钮后会弹出编辑弹框,如下图</p>
                            <p><img src="/src/assets/help/engine-edit.jpg" alt=""></p>
                            <p>2.变更链接或者标题后点击【OK】即可完成编辑</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">搜索引擎 (删除)</div>
                        <div class="app-card-body">
                            <p>1.选择需要删除的搜索引擎,点击【删除】按钮后会弹出确认弹框,如下图</p>
                            <p><img src="/src/assets/help/engine-del.jpg" alt=""></p>
                            <p>2.点击【是】即可完成删除操作</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">搜索引擎 (排序)</div>
                        <div class="app-card-body">
                            <p>1.进入管理搜索引擎页面</p>
                            <p>2.鼠标左键点击选中一个搜索引擎,如下图</p>
                            <p><img src="/src/assets/help/engine-order.jpg" alt=""></p>
                            <p>3.并往下拖动或者往上拖动,拖动到合适的位置后松开左键即可完成排序</p>
                        </div>
                    </div>
                </div>
                <!-- bookmark -->
                <div class="help-engine" v-if="type.text == 'bookmark'">
                    <div class="app-card">
                        <div class="app-card-header">管理书签 (进入)</div>
                        <div class="app-card-body">
                            <p>登录后即可进入并管理书签,如下图</p>
                            <p><img src="/src/assets/help/bookmark-01.jpg" alt=""></p>
                            <p>在这里即可以对书签进行新增/编辑/删除/排序/变更分类等操作</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">书签分类 (新增)</div>
                        <div class="app-card-body">
                            <p>1.进入书签管理界面后,点击分类面板内右上角
                                <a-button shape="circle" size="small">+</a-button>
                                按钮弹出新增弹框,如下图
                            </p>
                            <p><img src="/src/assets/help/nav-add.jpg" alt=""></p>
                            <p>2.输入分类名称,点击【OK】即可新增一个书签分类</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">书签分类 (编辑)</div>
                        <div class="app-card-body">
                            <p>1.选择需要编辑的分类,点击【编辑】按钮后会弹出编辑弹框,如下图</p>
                            <p><img src="/src/assets/help/nav-edit.jpg" alt=""></p>
                            <p>2.变更分类名称后点击【OK】即可完成编辑</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">书签分类 (删除)</div>
                        <div class="app-card-body">
                            <p>1.选择需要删除的分类,点击【删除】按钮后会弹出确认弹框,删除分类时会删除该分类下所有的书签,如下图所示</p>
                            <p><img src="/src/assets/help/nav-del.jpg" alt=""></p>
                            <p>2.点击【是】即可完成删除操作</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">书签分类 (排序)</div>
                        <div class="app-card-body">
                            <p>1.进入管理书签页面</p>
                            <p>2.鼠标左键点击选中一个分类,如下图</p>
                            <p><img src="/src/assets/help/nav-order.jpg" alt=""></p>
                            <p>3.并往下拖动或者往上拖动,拖动到合适的位置后松开左键即可完成排序</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">书签 (新增)</div>
                        <div class="app-card-body">
                            <p>1.进入书签管理界面后,点击书签面板内右上角
                                <a-button shape="circle" size="small">+</a-button>
                                按钮弹出新增弹框,如下图
                            </p>
                            <p><img src="/src/assets/help/bookmark-add.jpg" alt=""></p>
                            <p>2.输入链接和标题,点击【OK】即可新增一个书签</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">书签 (编辑)</div>
                        <div class="app-card-body">
                            <p>1.选择需要编辑的书签,点击【编辑】按钮后会弹出编辑弹框,如下图</p>
                            <p><img src="/src/assets/help/bookmark-edit.jpg" alt=""></p>
                            <p>2.变更链接或者标题后点击【OK】即可完成编辑</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">书签 (删除)</div>
                        <div class="app-card-body">
                            <p>1.选择需要删除的书签,点击【删除】按钮后会弹出确认弹框,如下图</p>
                            <p><img src="/src/assets/help/bookmark-del.jpg" alt=""></p>
                            <p>2.点击【是】即可完成删除操作</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">书签 (排序)</div>
                        <div class="app-card-body">
                            <p>1.进入管理书签页面</p>
                            <p>2.鼠标左键点击选中一个书签,如下图</p>
                            <p><img src="/src/assets/help/bookmark-order.jpg" alt=""></p>
                            <p>3.并往下拖动或者往上拖动,拖动到合适的位置后松开左键即可完成排序</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">书签 (变更分类)</div>
                        <div class="app-card-body">
                            <p>1.进入管理书签页面,鼠标选中【移动模式】,书签会出现一个勾选框,如下图</p>
                            <p><img src="/src/assets/help/bookmark-edit-nav.jpg" alt=""></p>
                            <p>2.勾选你需要移动到其它分类的书签,选择完毕后再点击左侧分类即可完成分类变更</p>
                            <p>3.完成后需要再次选回【正常模式】</p>
                        </div>
                    </div>
                </div>
                <!-- setting -->
                <div class="help-setting" v-if="type.text == 'setting'">
                    <div class="app-card">
                        <div class="app-card-header">基础设置</div>
                        <div class="app-card-body">
                            <p>1.登录后,点击右上角【管理】->【设置】->【基础设置】,如下图</p>
                            <p><img src="/src/assets/help/setting-01.jpg" alt=""></p>
                            <p>2.这里可以设置首页默认显示【快速访问】还是【站点书签】</p>
                            <p>3.这里可以设置历史记录是否显示</p>
                            <p>4.这里可以设置天气插件是否开启</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">网站设置</div>
                        <div class="app-card-body">
                            <p>1.登录后,点击右上角【管理】->【设置】->【网站设置】,如下图</p>
                            <p><img src="/src/assets/help/setting-02.jpg" alt=""></p>
                            <p>2.这里可以设置站点的基础信息,比如站点名称,站点名称跳转,ICP备案号,ICP备案号跳转相关信息</p>
                        </div>
                    </div>
                    <div class="app-card margin-top">
                        <div class="app-card-header">其它设置</div>
                        <div class="app-card-body">
                            <p>1.登录后,点击右上角【管理】->【设置】->【其它设置】,如下图</p>
                            <p><img src="/src/assets/help/setting-03.jpg" alt=""></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    //import website from "/src/config/website";

    import Nav from '/src/components/skin/default/Nav.vue';

    export default {
        name: "help",
        components: {
            Nav
        },
        data() {
            return {
                type: {
                    text: 'key',
                },
            }
        },
        created() {
            this.init();
            let params = this.$route.params;
        },
        mounted() {

        },
        methods: {
            init() {

            },
            // typeChange
            typeChange(text) {
                this.type.text = text;
            },
        }
    }
</script>

<style lang="less" scoped>
    @width: 1000px;
    @height: 20px;
    @radius: 4px;

    .help-wrap {
        width: 100vw;
        min-height: 100vh;

        .main-wrap {
            width: @width;
            margin: 0 auto;

            .type-wrap {
                padding: 10px 0 0 0;
                margin: 0;
                text-align: center;

                li {
                    display: inline-block;
                    margin-bottom: 10px;
                    width: 80px;
                    height: 80px;
                    padding: 10px;
                    border-radius: @radius;
                    cursor: pointer;
                    margin-right: 10px;

                    &.active {
                        background: white;
                    }

                    &:last-child {
                        margin-right: 0;
                    }

                    .type-img {
                        width: 40px;
                        height: 40px;
                    }

                    .type-title {
                        height: 15px;
                        line-height: 15px;
                        margin-top: 5px;
                    }
                }
            }

            .help-body {
                color: #666666;
                padding-bottom: 10px;

                img {
                    max-width: 100%;
                    border: 4px solid #f1f1f1;
                }
            }
        }
    }

    @media screen and (max-width: @width + 40) {
        .help-wrap .main-wrap {
            width: auto;
            overflow: hidden;
            margin: 0;
            padding: 0 20px 20px 20px;

            .help-body {
                img {
                    width: 100%;
                }
            }
        }
    }
</style>